<template>
    <div class="madp-customer-crm">
        <div v-if="!showDetail">
            <div class="madp-filter">
                <el-form label-width="70px">
                    <el-form-item label="筛选:">
                        <el-radio-group v-model="tableType" @change="changeTable">
                            <el-radio :label="0">全部</el-radio>
                            <el-radio :label="1">已分配</el-radio>
                            <el-radio :label="2">未分配</el-radio>
                            <el-radio :label="3">已添加</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <div class="madp-btn">
                    <el-button v-if="permissions.cp_customer_crm_template_export" class="btns" type="primary" @click="downloadExcel">excel模板导出</el-button>
                    <el-upload
                        v-if="permissions.cp_customer_crm_excel_import"
                        action="/cp/add-customer/input-excel"
                        :headers="headers"
                        :show-file-list="false"
                        multiple
                        :on-success="refresh"
                        :on-error="onError"
                    >
                        <el-button type="primary">+ excel导入客户</el-button>
                    </el-upload>
                </div>
            </div>
            <p>共{{ num }}名客户</p>
            <div class="madp-table">
                <el-table
                    :header-cell-style="{
                        background: 'rgb(255, 191, 191)',
                        color: 'rgb(44,44,44)'
                    }"
                    stripe
                    v-loading="loading"
                    :data="tableData"
                >
                    <el-table-column label="序号">
                        <template slot-scope="scope">
                            {{ page.size * (page.current - 1) + scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="电话号码"></el-table-column>
                    <el-table-column prop="name" label="CRM客户姓名"></el-table-column>
                    <el-table-column prop="syncTime" label="同步时间">
                        <template slot-scope="scope">
                            {{ scope.row.syncTime || '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="state" label="添加状态">
                        <template slot-scope="scope">
                            {{ scope.row.state == 1 ? '已分配' : scope.row.state == 2 ? '未分配' : scope.row.state == 3 ? '已添加' : '全部' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="addTime" label="添加时间">
                        <template slot-scope="scope">
                            {{ scope.row.addTime || '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="custMgrName" label="分配员工">
                        <template slot-scope="scope">
                            {{ scope.row.custMgrName || '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.state == 3" type="text" @click="handleView(scope.row)">详情</el-button>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="madp-pagination">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.current"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                ></el-pagination>
            </div>
        </div>
        <div v-else>
            <UserDetail :detailMsg="detailMsg" @goBack="showDetail = false" />
        </div>
    </div>
</template>
<script>
import { getCrmList, downloadExcel } from '@/api/customer/customer-cms';
import UserDetail from './customer-user-detail';
import store from '@/store';
import { mapGetters } from 'vuex';
export default {
    components: {
        UserDetail
    },
    data() {
        return {
            loading: false, // 表格loading
            tableData: [], // 表格数据
            // 分页数据
            page: {
                current: 1,
                size: 10,
                total: 0
            },
            // 表格type
            tableType: 0,
            // 客户数量
            num: 0,
            // 请求头
            headers: {
                Authorization: 'Bearer ' + store.getters.access_token,
                'Madp-Tenant-Id': 1,
                'Madp-Corp-Id': 1
            },
            // 详情信息
            detailMsg: {},
            // 展示详情
            showDetail: false
        };
    },
    computed: {
        ...mapGetters(['permissions'])
    },
    created() {
        console.log(this.headers);
        this.getList();
    },
    methods: {
        // 刷新
        refresh() {
            this.getList();
        },
        // 上传失败回调
        onError() {
            this.$message({
                message: 'EXCEL格式不正确，请使用EXCEL模板导入',
                type: 'error'
            });
        },
        // 查询
        getList(data) {
            if (!data) {
                this.page.current = 1;
            }
            let obj = {
                current: this.page.current,
                size: this.page.size
            };
            if (this.tableType) obj.state = this.tableType;
            this.loading = true;
            getCrmList(obj)
                .then((res) => {
                    this.loading = false;
                    if (res.data.code != 0) return;
                    this.tableData = res.data.data.records;
                    this.page.total = res.data.data.total;
                    this.num = res.data.data.total;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        // 修改当前页显示条数
        handleSizeChange(size) {
            this.page.size = size;
            this.page.current = 1;
            this.getList(1);
        },
        // 修改当前页码
        handleCurrentChange(current) {
            this.page.current = current;
            this.getList(1);
        },
        // 更新表格
        changeTable() {
            this.getList();
        },
        // 查看详情
        handleView(data) {
            this.detailMsg = data;
            this.showDetail = true;
        },
        // 下载excel
        downloadExcel() {
            downloadExcel().then((res) => {
                let blob = new Blob([res.data], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8 '
                });
                let a = document.createElement('a');
                a.style.display = 'none';
                a.download = '导入CRM客户模板';
                a.href = URL.createObjectURL(blob);
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
        }
    }
};
</script>
<style scoped lang="scss">
.madp-customer-crm {
    .madp-filter {
        display: flex;
        justify-content: space-between;
    }
    .madp-table {
        margin-top: 20px;
    }
    .madp-pagination {
        margin-top: 10px;
        text-align: right;
    }
    .madp-btn {
        display: flex;
        height: 36px;
        .btns {
            margin-right: 10px;
        }
    }
}
</style>
